* {
    margin: 0;
    padding: 0;
}
body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(200deg, #b1f4cf, #9890e3);
}
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 500px;
    height: 300px;
    &:hover .card {
        animation-play-state: paused;
    }
}
.card {
    position: absolute;
    background-color: #fff;
    width: 430px;
    height: 100px;
    display: flex;
    // 将元素靠边对齐
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    border-radius: 100px 20px 20px 100px;
    opacity: 0;
    animation: animate 15s linear infinite;
    @for $i from 2 to 6 {
        &:nth-child(#{$i}) {
            animation-delay: 3s * ($i - 1);
        }
    }
    .content {
        display: flex;
        align-items: center;
    }
    .detail {
        margin-left: 100px;
        span {
            display: block;
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 8px;
        }
    }
    .img {
        width: 90px;
        height: 90px;
        position: absolute;
        left: 0;
        top: 0;
        background-color: #fff;
        padding: 5px;
        border-radius: 50%;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }
    }
    a {
        font-size: 14px;
        text-decoration: none;
        background: linear-gradient(to bottom, #fbc5ed, #a6c1ee);
        padding: 7px 18px;
        color: #fff;
        border-radius: 25px;
    }
}

@keyframes animate {
    0% {
        opacity: 0;
        transform: translateY(100%) scale(0.5);
    }
    5%,
    20% {
        opacity: 0.4;
        transform: translateY(100%) scale(0.7);
    }
    25%,
    40% {
        opacity: 1;
        transform: translateY(0%) scale(1);
    }
    45%,
    60% {
        opacity: 0.4;
        transform: translateY(-100%) scale(0.7);
    }
    65%,
    100% {
        opacity: 0;
        transform: translateY(-100%) scale(0.5);
    }
}
